<template>
  <div>
    <input type="file" hidden ref="file" @change="updatePhoto">
    <van-nav-bar
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <van-cell title="头像" value="内容" is-link center @click="$refs.file.click()" >
      <van-image
        slot="default"
        fit="cover"
        round
        :src="userInfo.photo"
        class="img-avt"
      />
    </van-cell>
    <van-cell is-link title="昵称" :value="userInfo.name" center @click="nameShow = true"></van-cell>
    <van-cell center is-link title="性别" :value="userInfo.gender === 0 ? '男' : '女'" @click="genderShow = true"/>
    <van-cell center is-link title="生日" :value="userInfo.birthday" @click="birShow = true"/>
    <!-- 编辑昵称弹出层 -->
    <van-popup v-model="nameShow" position="bottom" :style="{ height: '100%' }" >
      <updateName v-if="nameShow" v-model="userInfo.name" @close="nameShow = false" @input="nameShow = false"></updateName>
    </van-popup>
    <!-- 编辑性别弹出层 -->
    <van-popup v-model="genderShow" position="bottom" :style="{ height: '40%' }" >
      <updateGender v-if="genderShow" v-model="userInfo.gender" @close="genderShow = false" @input="genderShow = false"></updateGender>
    </van-popup>
     <!-- 编辑生日弹出层 -->
    <van-popup v-model="birShow" position="bottom" :style="{ height: '40%' }" >
      <updateBirthday v-if="birShow" v-model="userInfo.birthday" @close="birShow = false" @input="birShow = false"></updateBirthday>
    </van-popup>
    <!-- 更换头像弹出层 -->
    <van-popup v-model="photoShow" position="bottom" :style="{ height: '100%' }" >
      <updatePhoto :img="img" @updatePhoto="photo" v-if="photoShow" @close="photoShow = false"></updatePhoto>
    </van-popup>
  </div>
</template>

<script>
import { getUserFile } from '@/api/user'
import updateName from '@/views/userProfile/components/updateName'
import updateGender from '@/views/userProfile/components/updateGender'
import updateBirthday from '@/views/userProfile/components/updateBirthday'
import updatePhoto from '@/views/userProfile/components/updatePhoto'
export default {
  data () {
    return {
      userInfo: {}, // 用户信息
      nameShow: false, // 昵称弹出层
      genderShow: false, // 性别弹出层
      birShow: false, // 生日弹出层
      photoShow: false, // 头像弹出层
      img: ''
    }
  },
  methods: {
    async getUserFile () {
      try {
        const { data } = await getUserFile()
        this.userInfo = data.data
      } catch (err) {
        this.$toast('获取数据失败，请重试')
      }
    },
    // 更新头像
    updatePhoto () {
      const file = this.$refs.file.files[0]
      // 基于文件对象获取blob数据(文件路径)
      this.img = window.URL.createObjectURL(file) // window.URL.createObjectURL(file)将文件转化为blob数据
      this.photoShow = true
      this.$refs.file.value = ''
    },
    photo (data) {
      this.userInfo.photo = data
      this.photoShow = false
    }
  },
  created () {
    this.getUserFile()
  },
  components: {
    updateName,
    updateGender,
    updateBirthday,
    updatePhoto
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: springgreen;
}
/deep/.van-icon {
  padding-left: 20px;
  color: pink;
}
/deep/.van-nav-bar__title {
  color: #fff;
}
.img-avt {
  width: 90px;
  height: 90px;
}
</style>
